<template>
  <div class="wholeContainer">
    <div class="instructions">
      <div class="clearfix">
        <div>
          <h1 class="AllRule">当前规则</h1>
          <el-dropdown class="dropdown">
            <el-button type="primary">
              切换规则<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>淡季</el-dropdown-item>
              <el-dropdown-item>旺季</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="fr">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="dialogFormVisible = true"
              >编辑</el-button
            >
          </div>
        </div>

        <el-dialog title="排班规则修改" :visible.sync="dialogFormVisible">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="规则类型" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择规则类型">
                <el-option label="门店营业规则" value="shanghai"></el-option>
                <el-option label="开店规则" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择操作" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="添加规则"></el-radio>
                <el-radio label="修改规则"></el-radio>
                <el-radio label="删除规则"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="具体规则" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox
                  label="工作日 9:00-21:00，周末 10:00-22: 00"
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="输入规则" prop="desc">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dialogFormVisible = false"
                >立即修改</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
    <el-card shadow="hover" class="ruleContainer1">
      <img class="ruleImg" src="@/assets/规则1.png" alt="" />
    </el-card>
    <el-card shadow="hover" class="ruleContainer1">
      <img class="ruleImg" src="@/assets/规则2.png" alt="" />
    </el-card>
    <el-card shadow="hover" class="ruleContainer1">
      <img class="ruleImg" src="@/assets/规则3.png" alt="" />
    </el-card>
    <el-card shadow="hover" class="ruleContainer1">
      <img class="ruleImg" src="@/assets/规则4.png" alt="" />
    </el-card>
    <el-card shadow="hover" class="ruleContainer1">
      <img class="ruleImg" src="@/assets/规则5.png" alt="" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: "scherule",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "加强加班",
          address: "每天上班12个小时",
        },
        {
          date: "2016-05-04",
          name: "每天加班",
          address: "还想休息，不可能的",
        },
        {
          date: "2016-05-01",
          name: "天天加班",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "周末加班",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.instructions {
  padding: 10px 0;
  font-size: 13px;
}
.instruItem {
  font-size: 13px;
  margin-top: 20px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ruleContainer {
  margin-bottom: 10px;
}
.ruleTitle {
  line-height: 30px;
  margin-left: 5px;
}
.ruleContainer1 {
  width: 30%;
  float: left;
  margin: 20px 10px 0 20px;
  min-height: 230px;
}
.change {
  line-height: 30px;
  cursor: pointer;
  color: #1fa3f4;
}
.AllRule {
  float: left;
  line-height: 40px;
  margin-left: 20px;
}

.wholeContainer {
  padding: 20px;
  width: 98%;
  height: 630px;
  background-color: white;
  border-radius: 10px;
}

.dropdown {
  margin-left: 30px;
  line-height: 40px;
}
.ruleImg {
  width: 100%;
}
</style>
